<!--
 * @Descripttion:
 * @Copyright: 武汉一一零七科技有限公司©版权所有
 * @Link: www.s1107.com
 * @Contact: QQ:2487937004
 * @LastEditors: wzb
 * @LastEditTime: 2020-12-02 13:39:04
-->
<template>
<div>
    <wxc-popup popup-color="rgba(0, 0,0,0)" height="330" :show="isShow" @wxcPopupOverlayClicked="popupOverlayHideClick" pos="bottom" ref="tool">
        <div class="toolContent">
            <text class="toolTit"> 工具</text>
            <div class="tooItem">
                <text class="toolLeft">清晰度</text>
                <div class="toolRight">

                    <div class="toolRightItem" v-for="(item,index) in brightList" :key="index" @click="modeTab(index,item.mode)">
                        <div class="toolRightItemCircle" :class="{toolRightItemCircleActive:modeCurrent===index}"></div>
                        <text class="colorWhite" :class="{toolRightItemNameActive:modeCurrent===index}">{{item.name}}</text>
                    </div>

                </div>
            </div>

            <div class="tooItem">
                <text class="toolLeft"> 美颜</text>
                <div class="toolRight">
                    <div class="toolRightItem" v-for="(item,index) in beautyList" :key="index" @click="beautyTab(index,item.rank,'beautyCurrent','beautyLevel')">
                        <div class="toolRightItemCircle" :class="{toolRightItemCircleActive:beautyCurrent===index}"></div>
                        <text class="colorWhite" :class="{toolRightItemNameActive:beautyCurrent===index}">{{item.name}}</text>
                    </div>
                </div>
            </div>

            <div class="tooItem">
                <text class="toolLeft"> 美白</text>
                <div class="toolRight">
                    <div class="toolRightItem" v-for="(item,index) in whitenessList" :key="index" @click="beautyTab(index,item.rank,'whitenessCurrent','whitenessLevel')">
                        <div class="toolRightItemCircle" :class="{toolRightItemCircleActive:whitenessCurrent===index}"></div>
                        <text class="colorWhite" :class="{toolRightItemNameActive:whitenessCurrent===index}">{{item.name}}</text>
                    </div>
                </div>
            </div>

            <div class="tooItem">
                <text class="toolLeft">摄像头</text>
                <div class="toolRight">
                    <div  class="toolRightItem" >
                      <div class="u-flex" @click="onchange">
                        <div class="toolRightItemCircle" :class="{toolRightItemCircleActive:isCameraFront===true}"></div>
                        <text class="colorWhite switchFrontText cameraText" :style="{color:isCameraFront?'#05FF80':'#fff'}">前置</text>
                      </div>
                      <div class="u-flex" @click="onchange">>
                        <div class="toolRightItemCircle" :class="{toolRightItemCircleActive:isCameraFront===false}"></div>
                         <text :style="{color:!isCameraFront?'#05FF80':'#fff'}" class="colorWhite switchFrontText cameraText">后置</text>
                      </div>
                    </div>
                  </div>
            </div>
            <div class="tooItem">
                <text class="toolLeft">自动聚焦</text>
                <div class="toolRight">

                  <div v-for="(item,index) in foucsList" class="toolRightItem" @click="onFocusChange(index)">
                    <div class="toolRightItemCircle" :class="{toolRightItemCircleActive:autoFocusIndex===index}"></div>
                    <text class="colorWhite switchFrontText" :class="{toolRightItemNameActive:autoFocusIndex===index}">{{item.name}}</text>
                  </div>
                </div>
            </div>
            <div class="tooItem">
                <text class="toolLeft">麦克风</text>
                <div class="toolRight">
                  <div v-for="(item,index) in muteList" class="toolRightItem" @click="onmuteChange(index)">
                    <div class="toolRightItemCircle" :class="{toolRightItemCircleActive:muteIndex===index}"></div>
                    <text class="colorWhite switchFrontText" :class="{toolRightItemNameActive:muteIndex===index}">{{item.name}}</text>
                  </div>
                </div>
            </div>
        </div>
    </wxc-popup>
</div>
</template>

<script>
import {WxcIcon, WxcPopup,} from "weex-ui"

export default {
    name: 'toolPop',
    data() {
        return {

            checked: false,
            modeCurrent: 1,
          isCameraFront:true,
          cameraIndex:0,
          autoFocusIndex:0,
          muteIndex:0,

            whitenessCurrent: 2, //当前美白选中选项  默认值为 第3   二级美白
            beautyCurrent: 2, // 当前美颜选中选项 默认值为3   二级美颜
              config:{
                "background":"tranparent"
              },
  
          brightList: [{
            isOn: false,
            mode: "SD",
            name: 'SD'
          },
            {
              isOn: false,
              mode: "HD",
              name: 'HD'
            },
            {
              isOn: false,
              mode: "FHD",
              name: 'FHD'
            }
          ],
          whitenessList: [{
            isOn: false,
            name: '关闭',
            rank: 0
          },
            {
              isOn: false,
              name: '一级',
              rank: 2
            },
            {
              isOn: false,
              name: '二级',
              rank: 4
            },
            {
              isOn: true,
              name: ' 三级',
              rank: 6
            }, {
              isOn: false,
              name: ' 四级',
              rank: 9
            }
          ]
          
        }
    },
  computed:{
    cameraList(){
      return[
        {
          name: "前置",
          isSelected:true
        },
        {
          name:"后置",
          isSelected:false
        },
      ]
    },
    foucsList(){
      return [
        {
          name: '是',
          isSelected:true
        },
        {
          name: '否',
          isSelected:false
        },
      ]
    },
    muteList(){
      return [
        {
          name: '开启',
          isSelected:true
        },
        {
          name:'关闭',
          isSelected:false
        },
      ]
    },
  
    beautyList(){
      return [{
        isOn: false,
        name:'关闭',
        rank: 0
  
      }, {
        isOn: false,
        name:'一级',
        rank: 2
      },
        {
          isOn: false,
          name:'二级',
          rank: 4
        },
        {
          isOn: false,
          name: '三级',
          rank: 6
        }, {
          isOn: true,
          name: '四级',
          rank: 9
        }
      ]
    }
  
  },
    props: {
        isShow: {
            type: Boolean,
            required: false,
            default: false,
        }
    },
    components: {
        WxcPopup,
        WxcIcon,
 },

    methods: {
        popupOverlayHideClick(e) {

            // 蒙层关闭  手动将父组件 isToolShow返回原位false
            this.$parent.isToolShow = false
          this.$parent.isShowMessage=true

        },
        switch2Change: function (e) {
            console.log('switch2 发生 change 事件，携带值为', e.target.value)
        },
        onchange() {
            this.$parent.switchCamera()
        },
        onFocusChange(index) {
          this.autoFocusIndex=index
            this.$parent.autoFocus = !this.$parent.autoFocus

        },
        onmuteChange(index) {
          this.muteIndex= index
            this.$parent.isMute = !this.$parent.isMute

        },
        modeTab(index, type) {
            this.modeCurrent = index
            this.$parent.codeRate = type
            console.log(this.$parent.codeRate);
        },
        beautyTab(index, rank, type, level) {
            this[type] = index
            this.$parent[level] = rank
            console.log(this.$parent[level]);
        }
    }
}
</script>

<style scoped>

.tooItem {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40upx;
    z-index: 99999;
}

.colorWhite {
    color: #fff;
    font-size: 26upx;
}

.toolContent {
    padding: 25upx;
    border-top-right-radius: 24upx;
    border-top-left-radius: 24upx;
    background-color: rgba(0, 0, 0, 0.7);
    height: 600upx;
    padding-bottom: 40upx;
    width:750upx
}

.toolLeft {
    font-size: 32upx;
    font-weight: 600;
    color: #fff;
}

.toolRight {
    flex-direction: row;
    align-items: center;

}

.toolRightItem {
    flex-direction: row;
}

.toolSwitch {
    margin: 10upx;
}

.toolTit {
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: 40upx;
    margin: 10upx 0 40upx 0;
}

.toolRightItemCircle {
    width: 34upx;
    height: 34upx;
    border-width: 3upx;
    border-style: solid;
    border-color: #999;
    margin-left: 20upx;
    margin-right: 4upx;
    border-radius: 200px;
}

.toolRightItemCircleActive {
    background-color: #05FF80;
    border-width: 0;
}
.toolRightItemNameActive{
  color:  #05FF80;
}
.cameraText{
  padding: 10upx 8upx;
}
.u-flex{
  flex-direction: row;
  align-items: center;
}

</style>
